<template>
<div id="homeBox">
<el-container>
  <el-header>
    <el-row :gutter="20"  style="display: flex;width: 100%;">
        <el-col :span="4" style="display: flex;">
            <div class="grid-content bg-purple" style="display: flex;align-items: center;justify-content: flex-end;">
                <img src="../assets/logo.png" style="width:100%;height:auto;">
            </div>
        </el-col>
        <el-col :span="8">
            <div class="grid-content bg-purple logo" style="font-size:25px">
               <!-- WN综合管理系统 -->
            </div>
        </el-col>
        <el-col :span="12" style="display: flex;justify-content: flex-end; align-items: center;">
            <div class="grid-content bg-purple">
                <el-row :gutter="20" style="display: flex;justify-content: flex-end;">
                    <el-col :span="20" style="display: flex;justify-content: flex-end;">
                        <div class="grid-content bg-purple register">
                            <el-button type="text"  @click="registerVisible = true">注册</el-button>
                             <el-button type="text" @click="centerDialogVisible = true">登录</el-button>
                        </div>
                    </el-col>               
                </el-row>
            </div>
        </el-col>
    </el-row>    
  </el-header>
  <el-main style="padding: 0px;">
    <div id="cesiumContainer"></div>
       <!-- <img src="../assets/login1.png"> -->
      <!-- <el-carousel>
        <el-carousel-item v-for="src in srcs" :key="src">
         <el-image :src="src"></el-image>
        </el-carousel-item>
    </el-carousel> -->
  </el-main>
</el-container>

<!-- //登录弹框 -->
<el-dialog
  title="登录"
  :visible.sync="centerDialogVisible"
  @closed="closedDialog" 
  width="30%"
  center
  :show-close=false>  
  <el-form :model="loginParam" :rules="rules" ref="loginParam">
    <el-form-item prop="name">
      <el-input prefix-icon="el-icon-user" v-model="loginParam.name" autocomplete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input prefix-icon="el-icon-lock" v-model="loginParam.password" autocomplete="off" placeholder="密码" show-password></el-input>
    </el-form-item>
      <el-button type="text" @click="forgetDialogVisible = true">忘记密码？</el-button>
      <el-button type="text" @click="registerVisible = true">马上注册</el-button>
    <el-form-item>
      <el-button type="primary" v-on:click="login" style="width: 100%;">登录</el-button>
    </el-form-item>
  </el-form>
</el-dialog>


<!-- //注册弹框 -->
<el-dialog
  title="注册"
  :visible.sync="registerVisible"
  width="30%"
  center
  :show-close=false>  
  <el-form>
    <el-form-item >
      <el-input prefix-icon="el-icon-user" v-model="name" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item>
      <el-input prefix-icon="el-icon-lock" v-model="password" placeholder="密码" show-password></el-input>
    </el-form-item>
    <el-form-item>
      <el-input prefix-icon="el-icon-lock" v-model="password" placeholder="确定密码" show-password></el-input>
    </el-form-item>
    <!-- <el-form-item> -->
      <el-checkbox v-model="checked">我已完整阅读并接受《<span style="color:6CB7E9">用户服务协议</span>》各项条款</el-checkbox>
    <!-- </el-form-item> -->
    <el-form-item>
      <el-button type="primary" v-on:click="register" style="width: 100%;">注册</el-button>
    </el-form-item>
  </el-form>
</el-dialog>

<!-- //重置密码弹框 -->
<el-dialog
  title="重置密码"
  :visible.sync="forgetDialogVisible"
  width="30%"
  center
  :show-close=false>  
  <el-form>
  <el-form-item >
    <el-input prefix-icon="el-icon-user" v-model="name" placeholder="账号"></el-input>
  </el-form-item>
  <el-form-item>
    <el-input prefix-icon="el-icon-lock" v-model="password" placeholder="密码" show-password></el-input>
  </el-form-item>
  <el-form-item>
    <el-input prefix-icon="el-icon-lock" v-model="password" placeholder="确定密码" show-password></el-input>
  </el-form-item>
  <el-form-item>
     <el-button type="primary" v-on:click="resetPass" style="width: 100%;">提交</el-button>
  </el-form-item>
</el-form>
</el-dialog>
</div> 
</template>
<script>
export default{
  name:'LoginView',
  data(){
    return{
      viewer:{},
      inter:null,
      labelPosition: 'right',
      loginParam:{
        name:"",
        password:""
      },
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
      },
      name:'',
      password:'',
      checked:true,
      centerDialogVisible: false,
      registerVisible:false,
      forgetDialogVisible:false,
      activeIndex: '1',
      activeIndex2: '1',
      srcs: [
        'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
        'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
        'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg'
      ],
    }
  },
  mounted() {
    /**
     *初始化cesium
    */
   // this.initCesium(); 
  },
  methods: {
    initCesium(){
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxOThkNmNmNS1jMjYxLTQzNDMtYjFiOC1kYTU2MGZmYzNhZjUiLCJpZCI6Njg3MjYsImlhdCI6MTY0MDIyNzMzOH0.Hq7YWBI3wJUCtpJfmrb_kQ8dtN5hn-M3km-NG_SsPiQ';
      this.viewer = new Cesium.Viewer('cesiumContainer',{      
        geocoder:false,
        homeButton:false,
        sceneModePicker:false,
        baseLayerPicker:false,
        selectionIndicator: false,
        navigationHelpButton :false,//导航帮助按钮，显示默认的地图控制帮助
        animation:false,// 动画器件，控制视图动画的播放速度.
        timeline:false,//时间线,指示当前时间，并允许用户跳到特定的时间
        creditsDisplay:false,//版权显示，显示数据归属，必选
        infoBox: false,
        fullscreenButton:false,//关闭全屏按钮
        // 注释时相当于使用默认地形，解开注释相当于使用全球地形
        terrainProvider: Cesium.createWorldTerrain({
            //基于太阳位置开启地形照明
            requestVertexNormals: true,
            //启用水体效果
            requestWaterMask: true
        })
      });
       // 隐藏版权信息
      this.viewer._cesiumWidget._creditContainer.style.display = "none";    // 隐藏版权信息
      this.viewer.scene.skyAtmosphere.show=true;    // 隐藏大气层,false, true开启
      this.viewer.scene.globe.enableLighting = true; //开启光照效果


      let that = this;
      this.viewer.scene.globe.enableLighting = true
			this.viewer.shadows = true
			this.viewer.terrainShadows = Cesium.ShadowMode.RECEIVE_ONLY
			this.viewer.shadowMap.darkness = 0.02 //阴影透明度--越大越透明
			let time = 0
      
			this.inter = setInterval(() => {
				// 改变时间设置光照效果
				let date = new Date().getTime() + time
				let utc = Cesium.JulianDate.fromDate(new Date(date))
				//北京时间
				that.viewer.clockViewModel.currentTime = Cesium.JulianDate.addHours(utc, 0, new Cesium.JulianDate())
				time = time + 1000 * 60
			}, 100)
      console.log(this.inter)

    },

    //登录成功跳转
    login:function(){
      debugger
      let that = this
      that.$refs["loginParam"].validate((valid) => {
        if (valid) {
          that.$axios({
            url: '/user',
            method: 'post',
            data:{
              userNickName:that.loginParam.name,
              userPassword:that.loginParam.password
            },
          })
          .then(function (response) {
            // handle success
            console.log(response);  
             that.$notify({
              title: '成功',
              message: '这是一条成功的提示消息',
              type: 'success',
              position: 'bottom-right'
            });     
            that.$router.push({path:'/index/home'});
            window.location.reload();
            that.$refs["loginParam"].resetFields();
            
          })
          .catch(function (error) {
            // handle error
            console.log(error);            
             that.$notify({
              title: '成功',
              message: '以游客身份访问',
              type: 'success',
              position: 'bottom-right'
            });   
            that.$router.push({path:'/index/home'});
            window.location.reload();
            that.$refs["loginParam"].resetFields();
          }) 
        } else {
          console.log('error submit!!');
          return false;
        }
      });
         
    },
    //注册成功直接跳转主页  
    register:function(){
      this.$router.push({path:'/index/home'});
      window.location.reload();
    },
    //forget password
    resetPass:function(){
      this.forgetDialogVisible=false;
      this.centerDialogVisible=false;
    },
    //关闭弹框回调
    closedDialog:function(){
      this.$refs["loginParam"].resetFields();
    }
  }
}
</script>
<style leng='scss'>
html,body,#homeBox,#app{
    height:100%;
    overflow: hidden;
}
#homeBox{
    /* border:1px solid red; */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    /* background-color: #D3DCE6; */
}
.el-container{
    height:100%;
    /* border: 1px solid #B3C0D1; */
}
.el-header, .el-footer {
    background-color: #fff;
    color: #333;
    text-align: center;
    line-height: 60px;
    display: flex;
}
.el-footer {
    background-color: #fff;
    color: #333;
    display: flex;
    align-items: center;
}
.el-main{
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
    padding:0px;
    overflow: hidden;
}
.logo{
    display: flex;
    justify-content: flex-end;
}
.el-menu-top{
    display: flex;
    justify-content: flex-end;
}
.register{
    display: flex;
    justify-content: flex-end;
}

.el-carousel{
    height:100%
}
.el-carousel__container {
    position: relative;
    height: 100%;
}
.el-carousel__item h3 {
color: #475669;
font-size: 18px;
opacity: 0.75;
line-height: 300px;
margin: 0;
}

.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
.el-input{
    width:100%;
}
.el-dialog__header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #DCDFE6;
    border-image: linear-gradient(244deg, rgba(255,255,255,0) 0%, #409EFF 50%,rgba(255,255,255,0) 100%) 1 10;
    
}
 #cesiumContainer {
    height: 100%;
  }

</style>